import React, { Component } from 'react'
import "./index.less"
import { connect } from "react-redux"
import action from '../../../store/action/shopCar'
import { withRouter } from 'react-router-dom'
import Alert from '../../after/after'
// icon
import { LeftOutline, EnvironmentOutline, RightOutline, CloseOutline, ReceivePaymentOutline } from 'antd-mobile-icons'
// antd
import {
    Button,
    List,
    Popup
} from 'antd-mobile'
class order extends Component {
    state = {
        yunf: 10,//运费
        siteMsg: "请选择收货地址",//地址信息  默认是：请选择收货地址
        flag: false,
        item: {},//地址对象
        ifMYF: true,//判断支付的商品是否免运费
        visible1: false,//控制优惠券弹出层是否显示
        yhqMsgs: "可用优惠券",//优惠券信息
        token: JSON.parse(sessionStorage.getItem('token')),//登录信息
        yhq: "",//优惠券
        Index: '',
        price: [100, 200, 300]
    }
    // 返回购物车
    back() {
        this.props.history.push("/shopCar")
    }
    componentDidMount() {
        let { priceAll } = this.props.location.state
        if (priceAll >= 200) {
            this.setState({ ifMYF: false })
        }
    }
    Liysfalse = (item) => {
        this.setState({ item })
        this.setState({ siteMsg: item.val + item.house })
        this.setState({ flag: false })
    }
    render() {
        let { carData, priceAll } = this.props.location.state
        let { yunf, siteMsg, ifMYF, visible1, yhqMsgs, token, yhq } = this.state;

        let { submitOrderData, getCarData, yhqData } = this.props

        // 年
        let year = new Date().getFullYear();
        // 月
        let month = new Date().getMonth();
        // 日
        let day = new Date().getDate();
        // 小时
        let hours = new Date().getHours();
        // 分钟
        let minutes = new Date().getMinutes();
        // 秒数
        let seconds = new Date().getSeconds();
        let time = `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`


        return (
            <div className="orderBox">
                <header>
                    <p className="back" onClick={() => { this.back() }}>
                        <LeftOutline />
                    </p>
                    <p className="title">确认订单</p>
                    <p></p>
                </header>
                <main>
                    <div className="selectSite">
                        <List>
                            <List.Item prefix={<EnvironmentOutline />} onClick={() => {
                                this.setState({ flag: true })
                            }}>
                                {this.state.siteMsg}
                            </List.Item>
                        </List>
                    </div>
                    <div className="orderMsg">
                        <div className="orderMsg_top">
                            <div>
                                配送
                            </div>
                            <div>
                                {
                                    ifMYF ? <p className="myf">
                                        今日12:00-13:00<span>免运费</span>
                                    </p > : null
                                }
                                <p>
                                    <RightOutline />
                                </p >
                            </div>
                        </div>
                        <div className="orderMsg_shopBox">
                            <ul>
                                {
                                    carData.map((item, index) => {
                                        return <li key={index}>
                                            <div>
                                                <img src={item.img} alt="" />
                                            </div>
                                            <div>
                                                <p>
                                                    <span>{item.name}</span>
                                                    <span>￥{item.price * item.num}</span>
                                                </p>
                                                <p>
                                                    <span>规格：200g</span>
                                                </p>
                                                <p>
                                                    <span>单价：￥{item.price}</span>
                                                    <span>数量：{item.num}</span>
                                                </p>
                                            </div>
                                        </li>
                                    })
                                }
                            </ul>
                        </div>
                        <div className="orderMsg_bottom">
                            <div></div>
                            <div>
                                <p>共 {carData.length} 件商品</p>
                                <p>合计：<span>{priceAll}</span></p>
                            </div>
                        </div>
                    </div>
                    <div className="discountCoupon">
                        <List>
                            <List.Item
                                extra=''
                                clickable
                                onClick={() => {
                                    this.setState({ visible1: true })
                                }}
                            >
                                {yhqMsgs}
                            </List.Item>
                        </List>
                        {/* 弹出层 */}
                        <Popup
                            className="discountCouponAlert"
                            visible={visible1}
                            onMaskClick={() => {
                                this.setState({ visible1: false })
                            }}
                            bodyStyle={{ minHeight: '40vh' }}
                        >
                            <div className="top">
                                <p></p >
                                <p onClick={() => {
                                    this.setState({ visible1: false })
                                }}>
                                    <CloseOutline></CloseOutline>
                                </p >
                            </div>
                            <div className="con">
                                {
                                    JSON.parse(token.gender).map((item, index) => {
                                        return <div key={index}>
                                            <List.Item
                                                extra=''
                                                clickable
                                                onClick={(e) => {
                                                    this.setState({ Index: index, visible1: false, yhqMsgs: e.target.innerText, yhq: item })
                                                }}
                                            >
                                                <ReceivePaymentOutline />
                                                <span>{item === 10 ? `满100元减${item}` : (item === 20 ? `满200元减${item}` : (item === 30 ? `满300元减${item}` : ""))}</span>
                                            </List.Item>
                                        </div>
                                    })
                                }
                            </div>
                        </Popup>
                    </div>
                    <div className="sleBox">
                        <List>
                            <List.Item
                                extra='不开发票'
                                clickable
                                onClick={() => {
                                    this.setState({ visible: true })
                                }}
                            >
                                发票
                            </List.Item>
                        </List>
                        <List>
                            <List.Item
                                extra='人不在放在家门口'
                                clickable
                            >
                                订单备注
                            </List.Item>
                        </List>
                    </div>
                    {/* 运费 */}
                    {
                        ifMYF === false ? <div className="freight">
                            <List>
                                <List.Item
                                    extra={yunf}
                                    clickable
                                    onClick={() => {

                                    }}
                                >
                                    运费
                                </List.Item>
                            </List>
                        </div> : null
                    }
                </main>
                <footer>
                    <div></div>
                    <div>
                        <p className="price">合计：<span ref={(Xprice) => {
                            this.Xprice = Xprice
                        }}>￥{ifMYF === false ? (priceAll > this.state.price[this.state.Index] ? priceAll - JSON.parse(token.gender)[this.state.Index] : priceAll) + yunf : (priceAll > this.state.price[this.state.Index] ? priceAll - JSON.parse(token.gender)[this.state.Index] : priceAll)}</span></p >
                        <p onClick={() => {
                            let Xprice = this.Xprice.innerHTML.slice(1)
                            let msg = JSON.parse(sessionStorage.getItem("token"))
                            console.log(msg);
                            let data = carData.map(item => {
                                return {
                                    Js: item.Js,
                                    Pj: JSON.stringify(item.Pj),
                                    Xq: JSON.stringify(item.Xq),
                                    id: item.id,
                                    img: item.img,
                                    isCheck: JSON.stringify(item.isCheck),
                                    name: item.name,
                                    num: JSON.stringify(item.num),
                                    page: JSON.stringify(item.page),
                                    price: item.price,
                                    state: "1",//状态  2 待发货  1  待付款
                                    flag: msg.flag === 'true' ? "8.8" : null,
                                    time,
                                    ifId: item.ifId,
                                    countPrice: Xprice,
                                    yhq,
                                    yunf
                                }
                            })
                            // 点击提交订单，将数据传到后台，然后后台往mysql仓库表中添加
                            setTimeout(() => {
                                submitOrderData(data)
                            }, 0)
                            setTimeout(() => {
                                getCarData()
                            }, 100)
                            // 之后在跳转到详情页面，进行修改mysql订单表中的状态
                            this.props.history.push({
                                pathname: "/OrderDetail",
                                state: { carData: data, priceAll, yunf, yhq, time, site: this.state.item, Xprice }
                            })
                        }}>
                            <Button color='primary' style={{
                                "--border-radius": "200px",
                                "width": "100px",
                                "--background-color": "#09AFFF",
                                "border": "none"
                            }}>
                                提交订单
                            </Button>
                        </p>
                    </div>
                </footer>
                {
                    this.state.flag ? <Alert Liysfalse={this.Liysfalse} /> : null
                }
            </div>
        )
    }
}
export default connect(state => state.shop, action)(withRouter(order))